<!DOCTYPE HTML>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
let counter = 0;

async_test((t) => {
  self.test = t;
}, "A stylesheet with a crossorigin attribute should not load a cross-origin " +
   "resource that isn't CORS enabled");

const fail = test.step_func((target) => {
  const href = target.href;
  assert_unreached('"' + href + '"');
});

function pass() {
  ++counter;
  if (counter !== 8) {
    return;
  }

  self.test.done();
}
</script>
</head>
<body>
<p>Test that a linked stylesheet with a crossorigin attribute does not load a cross-origin resource that isn't CORS enabled.</p>
<link crossorigin="anonymous" rel="stylesheet" href="http://localhost:8080/security/resources/green-background.css?1" onload="fail(this)" onerror="pass()">
<link crossorigin="use-credentials" rel="stylesheet" href="http://localhost:8080/security/resources/green-background.css?2" onload="fail(this)" onerror="pass()">
<!-- Check that from-cache loads are also failing (and does not generate separate loads.) -->
<link crossorigin="anonymous" rel="stylesheet" href="http://localhost:8080/security/resources/green-background.css?1" onload="fail(this)" onerror="pass()">
<link crossorigin="use-credentials" rel="stylesheet" href="http://localhost:8080/security/resources/green-background.css?2" onload="fail(this)" onerror="pass()">
<!-- These are same-origin and should load as the fetch wasn't out of origin -->
<link crossorigin="anonymous" rel="stylesheet" href="resources/green-background.css?3" onload="pass()" onerror="fail(this)">
<link crossorigin="use-credentials" rel="stylesheet" href="resources/green-background.css?4" onload="pass()" onerror="fail(this)">
<script>
function runTest()
{
    // Test that dynamically inserted <link> elements are handled the same way.
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.crossOrigin = "anonymous";
    link.onload = fail.bind(link, link);
    link.onerror = pass;
    link.href = "http://localhost:8080/security/resources/green-background.css?8";
    document.body.appendChild(link);

    link = document.createElement("link");
    link.rel = "stylesheet";
    link.crossOrigin = "use-credentials";
    link.onload = fail.bind(link, link);
    link.onerror = pass;
    link.href = "http://localhost:8080/security/resources/green-background.css?9";
    document.body.appendChild(link);
}
window.onload = runTest;
</script>
</body>
</html>
